<template>
    <div>
        <el-form label-width="80px" >
            <el-form-item label="用户名" prop="username" >
                <el-input v-model="userForm.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email"
              :rules="[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                      ]">
                <el-input v-model="userForm.email"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="userForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="userForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item> 
                <el-button type="primary" @click="submitForm">注册</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userForm: {
                username: '',
                email: '',
                password: '',
                checkPass:'',
            }
      };
    },
    methods: {
      resetForm(formName) {
          alert(1);
        this.$refs[formName].resetFields();
      },
      submitForm(){ 
          
          console.log(this.Form.username);
          console.log(this.Form.password);

      }
    }
  }

</script>

<style>
    
</style>